<template>
  <view>
    <headerss title='个人设置'></headerss>

    <view class="content">
      <view class="avatar">
        <view class="item">头像</view>
        <image src="../../static/imgs/Rectangle 548.png" mode=""></image>
      </view>

      <view class="nickname">
        <view class="item">昵称</view>
        <input v-model="nickname" type="text" placeholder="请输入" style="text-align: right;">
      </view>

      <view class="sex">
        <view class="item">性别</view>
        <u-radio-group v-model="radio" :icon-size='12'>
          <u-radio name='1' :label-size='24' style="margin-right: 20rpx;">男</u-radio>
          <u-radio name='2' :label-size='24'>女</u-radio>
        </u-radio-group>
      </view>

      <view class="birthday">
        <view class="item">生日</view>
        <view>
          <u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
          <text @click="show = true" v-if="time==''" style="color: #999;">选择生日</text>
          <text v-else @click="show = true">{{time}}</text>
        </view>
      </view>

      <button class="submit">提交</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        mode: 'date',
        nickname: '', // 昵称
        radio: 1, // 1男 2女
        time: '', // 生日
        change(e) {
          this.time = e.result
        }
      }
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep .u-radio__label.data-v-643b3322 {
    margin-right: 0;
  }

  ::v-deep .u-radio.data-v-643b3322 {
    margin-left: 57rpx;
  }

  .content {
    margin: 32rpx auto;
    width: 686rpx;
    height: 700rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(190, 162, 111, 0.2);
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .avatar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #eee;
      padding: 38rpx 32rpx 40rpx;

      >image {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
      }
    }

    .nickname,
    .sex,
    .birthday {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #eee;
      padding: 38rpx 32rpx;
    }

    .birthday {
      border: none;
    }

    .submit {
      margin-top: 40rpx;
      width: 622rpx;
      height: 76rpx;
      line-height: 76rpx;
      background: linear-gradient(90deg, #FDDE68 0%, #F3C621 100%);
      border-radius: 70rpx 70rpx 70rpx 70rpx;

      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;

      &:after {
        border: none;
      }
    }

    .item {
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
</style>